<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>New Registration</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <!---styles--->
        <link type="text/css" href="/BasketApp/scripts/bootstrap/css/bootstrap_yeti.css" rel="stylesheet">
        <link type="text/css" href="/BasketApp/styles/BasketStyle.css" rel="stylesheet">
        <link type="text/css" href="/BasketApp/styles/redmond/jquery-ui-1.10.4.custom.css" rel="stylesheet">
        <!----Scripts---->
        <script src="/BasketApp/scripts/jquery-1.10.2.js" type="text/javascript"></script>
        <script src="/BasketApp/scripts/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
        <script src="/BasketApp/scripts/bootstrap/js/bootstrap.js" type='text/javascript'></script>
        <script src="/BasketApp/scripts/handlebars-v1.3.0.js" type="text/javascript"></script>
        <script src="/BasketApp/scripts/jquery.cookie.js" type="text/javascript"></script>
        <script src="/BasketApp/scripts/jquery.validate.js" type="text/javascript"></script>
        <script src="/BasketApp/scripts/jsUtil.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {

                //----------date picker---------------//
                $("#dob").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: "yy-mm-dd"
                });

                //------------------------------------//
                console.log("loading navbar");
                includes("navbar_template", {}, "#navBar");

                //--------------registter----------------
                function submitForm() {
                    // TODO: Validate the controls

                    //serialize form
                    var customer = $("#customerForm").toJson();
                    customer.username = {username: customer.username, password: customer.password};
                    customer.dob = customer.dob + "T00:00:00";
                    customer = JSON.stringify(customer);
                    $(this).ajaxWrapper("api/Customer/register", success, fail, customer, "application/json");// send to servlet

                }
                //------success---------
                function success(data)
                {
                    //data
                    if (data.error == true)
                    {
                        console.log("fail");
                        //display the error message
                        includes("errorPane_template", data, "#msgPane");
                    }
                    else
                    {
                        //everything succeeded fine Redirect to login.html.
                        console.log("success");
                        includes("successPane_template", {msg: "Registration Successful!. You will be redirected to login in 5 seconds..."}, "#msgPane");
                        includes("thankyou_template", {title: "Thank you!", message: "Thank you for being a member of Basket. Expect to find the finest fruits and vegetables available at your fingertips."}, "#customerForm");
                        //setTimeout(function(){window.location.replace("login.html");},5000);         

                    }
                };
                
                

                //------failure---------
                function fail(data)
                {
                    //data
                };
                

                //--------------------validation----------------------
                //
                $("#customerForm").validate({
                    rules: {
                        name: "required",
                        email: "email",
                        phoneNumber: "digits",
                        dob: "date",
                        username: "required",
                        password: "required",
                        ConfirmPassword: {equalTo: "#password"}
                    },
                    submitHandler: submitForm,
                    errorClass: "errorClass"
                });

                //
                //--------------end validation------------------------
            });
        </script>
    </head>
    <body>
        <div class="row">
            <div id="navBar" style="height:100px"></div>
        </div>
        <br>
        <br>
        <div class="row" style="">
            <div class="col-lg-6 col-lg-offset-3">
                <div id="msgPane"></div>
                <div class="well">
                    <form method="post" action="#" id="customerForm" class="bs-example form-horizontal">
                        <fieldset>
                            <legend>New Customer Registration</legend>

                            <div class="form-group">
                                <label for="Name" class="col-lg-3 control-label">Name : </label>
                                <div class="col-lg-7">
                                    <input type="text" class="form-control" required name="name" placeholder="Enter your full name" id="NameTxt"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="Email" class="col-lg-3 control-label">E-mail Address : </label>
                                <div class="col-lg-7">
                                    <input type="email" class="form-control" required name="email" placeholder="Enter your E-mail Address" id="EmailTxt"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="MobileNumber" class="col-lg-3 control-label">Mobile Number : </label>
                                <div class="col-lg-7">
                                    <input type="text" class="form-control" required name="phonenumber" placeholder="Enter your Mobile Number" id="MobileNumberTxt"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="DateOfBirth" class="col-lg-3 control-label">Date Of Birth : </label>
                                <div class="col-lg-7">
                                    <!--                        <input type="date" class="form-control" name="dob" id="DateOfBirthTxt"/>-->
                                    <input type="text" class="form-control" name="dob" id="dob" placeholder="Click to select a date">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="Gender" class="col-lg-3 control-label">Gender :</label>
                                <div class="col-lg-7">
                                    <div class="radio-inline">
                                        <input type="radio" id="genderoptionM" name="gender" value="Male" checked="">Male
                                    </div>
                                    <div class="radio-inline">
                                        <input type="radio"  name="gender" value="Female" id="genderoptionF">Female
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="Address" class="col-lg-3 control-label">Address:</label>
                                <div class="col-lg-7">
                                    <textarea class="form-control" rows="3" id="Address" name="address"></textarea>
                                </div>
                            </div>

                            <hr>

                            <div class="form-group">
                                <label for="Username" class="col-lg-3 control-label">Username : </label>
                                <div class="col-lg-7">
                                    <input type="text" class="form-control" required name="username" placeholder="Enter your Username" id="UsernameTxt"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="Password" class="col-lg-3 control-label">Password : </label>
                                <div class="col-lg-7">
                                    <input type="password" class="form-control" required name="password" placeholder="Enter your Password" id="PasswordTxt"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="ConfirmPassword" class="col-lg-3 control-label">Confirm Password : </label>
                                <div class="col-lg-7">
                                    <input type="password" class="form-control" required name="ConfirmPassword" placeholder="Enter your Password again" id="ConfirmPasswordTxt"/>
                                </div>
                            </div>
                            <!--
                            <div class="form-group">
                                <label for="SecurityQuestion" class="col-lg-3 control-label">Security Question : </label>
                                <div class="col-lg-7">
                                    <select name="securityquestion" class="form-control" id="SecurityQuestion">
                                    <option>Favourite Color</option>
                                    <option>Pet's Name</option>
                                    <option>Mother's maiden name</option>
                                    <option>Favourite Singer</option>
                                    </select>
                                </div>
                            </div>
            
                            <div class="form-group">
                                <label for="SecurityAnswer" class="col-lg-3 control-label">Answer : </label>
                                <div class="col-lg-7">
                                    <input type="text" placeholder="Enter answer for Security Question" class="form-control" name="SecurityAnswer" id="SecurityAnswerTxt"/>
                                </div>
                            </div>
                            --->
                            <div class="form-group">
                                <div class="col-lg-7 col-lg-offset-3">
                                    <button type="submit" name="button" value="Register" id="submitBtn" class="btn btn-primary">Register</button>&nbsp;&nbsp;
                                    <a href="login.html">Go back to Login Page</a>
                                </div>
                            </div>

                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>
